const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const PurgeCSSPlugin = require('purgecss-webpack-plugin')
const { resolve } = require('path')
const { PROJECT_PATH } = require('../constants')
const glob = require('glob')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const webpack = require('webpack')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

module.exports = merge(common, {
  mode: 'production',
  target: 'browserslist',
  output: {
    filename: 'js/[name].[contenthash:8].js',
    path: resolve(PROJECT_PATH, './dist'),
    assetModuleFilename: 'images/[name].[contenthash:8].chunk.[ext]',
  },
  devtool: false,
  plugins: [
    new CleanWebpackPlugin(),
    // new PurgeCSSPlugin({
    //   paths: glob.sync(`${resolve(PROJECT_PATH, './src')}/**/*.{tsx,scss,less,css}`, { nodir: true }),
    //   whitelist: ['html', 'body'],
    // }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css',
      chunkFilename: 'css/[name].[contenthash:8].css',
      ignoreOrder: false,
    }),
    // 添加注释
    new webpack.BannerPlugin({
      raw: true,
      banner: '/** @preserve Powered by react-ts-template (https://gitee.com/linshisancc/react-ts-template) */',
    }),
    // new BundleAnalyzerPlugin({
    //   analyzerMode: 'server', // 开一个本地服务查看报告
    //   analyzerHost: '127.0.0.1', // host 设置
    //   analyzerPort: 8888, // 端口号设置
    // }),
  ],

  // 压缩js css 代码
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: false,
        terserOptions: {
          // 去掉 console.log
          // compress: { pure_funcs: ['console.log'] },
        },
      }),
      new OptimizeCssAssetsPlugin(),
    ],
    splitChunks: {
      chunks: 'all',
      minSize: 0,
    },
  },
})
